<template>
  <div class="patient-prescriptionItem-view">
    <div class="caseContent-main">
      <div class="caseContent-title" v-if="index == 0">
        <div class="title-left"><span>处方医嘱</span></div>
      </div>
      <div class="caseContent-content">
        <div class="prescription-view" v-for="(data,i) in list">
          <div class="prescription-title">
            <img src="../../../assets/img/payOrDrug/icon_pay2.png">
            <span>{{data.name}}</span>
          </div>

          <div v-if="datas.category_key == 'ypcf' && datas.remark[1]">
            <div class="prescription-item" >

              <div class="prescription-item-value">
                剂数
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">

                <span class="gray">{{data.remark.js}}</span>
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                每日剂量
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value infinite">
                <span class="gray">{{data.remark.mrjl}}</span>
              </div>

              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                用药频率
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                <span class="gray">{{data.remark.yypl}}</span>
              </div>

            </div>

            <div class="prescription-item" >
              <div class="prescription-item-value">
                用法
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value infinite">

                <span class="gray">{{data.remark.yf}}</span>
              </div>

            </div>

            <div class="prescription-item" >
              <div class="prescription-item-value">
                服用要求
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value infinite">

                <span class="gray">{{data.remark.fyyq}}</span>
              </div>

            </div>
          </div>


          <div v-else-if="datas.category_key == 'sycf'">
            <div class="prescription-item" >

              <div class="prescription-item-value">
                用法
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">

                <span class="gray">{{data.remark.yf}}</span>
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                滴速
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value infinite">
                <span class="gray">{{data.remark.ds + data.remark.ds_unit}}</span>
              </div>

              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                用药频率
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                <span class="gray">{{data.remark.yypl}}</span>
              </div>


            </div>

            <div class="prescription-item" >
              <div class="prescription-item-value">
                起始日期
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value infinite">

                <span class="gray">{{data.remark.qzrq | dateFormat("yyyy-mm-dd")}}</span>
              </div>

              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                连续天数
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                <span class="gray">{{data.remark.lxts}}天</span>
              </div>

            </div>
          </div>


          <div class="prescription-item" v-for="prescription in data.details">
            <template v-if="datas.category_key == 'cycf'">
              <div class="prescription-item-name">
                <span>{{prescription.product_name}}</span>
                <span class="gray">{{prescription.pack}}</span>
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">


                <p class="text-line text-line-1" style="display: unset">{{prescription.use_way}}</p>

                <el-popover
                  v-if="prescription.use_way.length > 6"
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  :content="prescription.use_way">

                  <i slot="reference" class="el-icon-more"></i>
                </el-popover>


              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                {{prescription.medication_rate}}
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                <span>{{prescription.single_dose}}</span>
                <div class="unit gray">{{prescription.single_unit}}</div>
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                <span>{{prescription.number}}</span>
                <div class="unit gray">{{prescription.unit}}</div>
              </div>
            </template>

            <template v-else-if="datas.category_key == 'ypcf'">
              <div class="prescription-item-name">
                <span>{{prescription.product_name}}</span>
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value wide">
                <span>{{prescription.remark}}</span>
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                <span>{{prescription.number}}</span>
              </div>
            </template>

            <template v-else-if="datas.category_key == 'sycf'">
              <div class="prescription-item-name">
                <span>{{prescription.product_name}}</span>
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value wide">
                <span>{{prescription.single_dose}}</span>
                <span class="gray unit">{{prescription.single_unit}}</span>
              </div>
              <div class="prescription-item-line"></div>
              <div class="prescription-item-value">
                <span>{{prescription.number}}</span>
                <span class="gray unit">{{prescription.unit}}</span>
              </div>
            </template>


          </div>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
    export default {
        name: "prescriptionItem",
        props:{
            datas:Object,
            index:Number,
        },
        data:function(){
            return{
                list:[]
            }
        },
        mounted:function() {
            if (this.datas.category_key == "sycf"){
                let drug = {};
                for (let i = 0; i < this.datas.details.length; i++){
                    if (!drug[this.datas.details[i].group]){
                        drug[this.datas.details[i].group] = [this.datas.details[i]]
                    }else {
                        drug[this.datas.details[i].group].push(this.datas.details[i])
                    }
                }
                for (let key in this.datas.remark){
                    let data = {
                        name:this.datas.category_name + key,
                        remark:this.datas.remark[key],
                        details:drug[key] ? drug[key] : []
                    }
                    this.list.push(data);
                }


            }else {
                let data = {
                    name:this.datas.category_name,
                    remark:this.datas.remark ? this.datas.remark[1] : null,
                    details:this.datas.details
                }
                this.list.push(data);
            }

            console.log(this.list);
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/patient/prescriptionItem.scss";
</style>
